{% extends 'core/base.html' %}
{% load staticfiles %}

{% block breadcrumb %}
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item">Users</li>
        <li class="breadcrumb-item active">Users View</li>
{% endblock breadcrumb%}

{% block content %}
<div class="container-fluid">
    <div class="animated fade-in">
        <div class="row">
            <table class="table table-responsive-sm table-hover table-outline mb-5 ">
                <thead class="thead-light">
                <tr>
                    <th class="text-center"><i class="fa fa-user"></i></th>
                    <th>User</th>
                    <th class="text-center">Assigned Projects</th>
                    <th>Tasks</th>
                    <th class="text-center">Assigned Tasks</th>
                    <th>Activity</th>
                </tr>
            </thead>
                    <tbody>
                        <!-- user1 -->
                        {% for user1 in users %}
                        <tr>
                            <td class="text-center">
                                <div class="avatar">
                                <img src="{{ user1.img.url }}" class="img-avatar" alt="{{ user1.email }}">
                                <span class="avatar-status badge-success"></span>
                                </div>
                            </td>
                            <td>
                                {% if user1.user.get_full_name %}
                                <div>{{ user1.user.get_full_name }}{% if user1.user.is_staff %} <span class="badge badge-pill badge-dark"> staff</span> {% endif %}</div>
                                {% else %}
                                <div>{{ user1.user.username }}{% if user1.user.is_staff %} <span class="badge badge-pill badge-dark"> staff</span> {% endif %}</div>
                                {% endif %}
                                <div class="small text-muted">
                                <span>Joined:</span> | {{ user1.user.date_joined }}
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-pill badge-dark">{{ user1.user.project_set.all.count }}</span>
                            </td>
                            <td>
                                <div class="clearfix">
                                <div class="float-left">
                                <strong>{% widthratio user1.user.task_set.values.count  tasks.count 100 %}%</strong>
                                </div>
                                <div class="float-right">
                                <small class="text-muted">of total tasks</small>
                                </div>
                                </div>
                                <div class="progress progress-xs">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: {% widthratio user1.user.task_set.values.count tasks.count 100 %}%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-pill badge-dark">{{ user1.user.task_set.values.count }}</span>
                                <span class="badge badge-pill badge-dark"></span>
                            </td>
                            <td>
                                <div class="small text-muted">Last login</div>
                                <strong>{{ user1.user.last_login }}</strong>
                            </td>
                        </tr>
                        {% endfor %}
                        <!-- end user -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}